
//图标1
	console.info(echarts);
	var myChart = echarts.init(document.getElementById('main'));
	console.info(myChart);
	var option = {
	   tooltip: {
	            trigger: 'axis'
	        },
	        xAxis: [
	            {
	                type: 'category',
	                boundaryGap: false,
	                data: ['8-1', '8-2', '8-3', '8-4', '8-5', '8-6', '8-7']
	            }
	        ],
	        yAxis: [
	            {
	                name: '成交笔数',
	                type: 'value',
	                max: 100
	            },
	            {
	                name: '访问次数',
	                type: 'value',
	                max: 100
	            }
	        ],
	        series: [
	            {
	                name: '客单价',
	                type: 'line',
	                tooltip: {
	                    trigger: 'axis'
	                    // formatter: '{a} <br/>{b}日: {c}元'
	                },
	                smooth: true,
	                itemStyle: {
	                    normal: {
	                        color: 'rgba(2, 197, 233, 0.2)',
	                        lineStyle: {
	                            color: 'rgba(23, 107, 203, 0.2)'
	                        },
	                        areaStyle: {
	                            color: 'rgba(223, 147, 233, 0.2)'
	                        }
	                    }
	                },
	                data: [10, 12, 21, 54, 60, 80, 71]
	            },
	            {
	                name: '交易笔数',
	                type: 'line',
	                tooltip: {
	                    trigger: 'axis'
	                    // formatter: '{a} <br/>{b}日: {c}元'
	                },
	                yAxisIndex: 1,
	                smooth: true,
	                itemStyle: {
	                    normal: {
	                        color: 'rgba(2, 197, 233, 0.2)',
	                        lineStyle: {
	                            color: '#3775E8'
	                        }
	                    }
	                },
	                data: [30, 32, 61, 24, 20, 90, 20]
	            }
	        ]
	};
	myChart.setOption(option);

//图标2
var myChart2 = echarts.init(document.getElementById('chart-2'));


var colors = ['#5793f3', '#FFAE4A', '#FFAE4A'];


var option2 = {
    title:{

    },
    color: colors,

    tooltip: {
        trigger: 'none',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data:['2015 访问量', '2016 访问量']
    },
    grid: {
        top: 70,
        bottom: 50,
        containLabel:true
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '访问量  ' + params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
        },
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: false,
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '访问量  ' + params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name:'2015 降水量',
            type:'line',
            xAxisIndex: 1,
            smooth: true,
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
            name:'2016 降水量',
            type:'line',
            smooth: true,
            data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
        }
    ]
};

myChart2.setOption(option2);

//留存访客
var myChartime = echarts.init(document.getElementById('chart-keep'));
var hours = ['100%', '60%', '23%', '17%', '10%', '5%', '3%'];
var days = ['01.03', '01.02', '01.01',
        '12.30', '12.29', '12.28', '12.27'];
var data = [[0,0,5],[0,1,4],[0,2,3],[0,3,2],[0,4,1],[0,5,0],[1,0,5],[1,1,4],[1,2,3],[1,3,2],[1,4,1],[1,5,0],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];

data = data.map(function (item) {
    return [item[1], item[0], item[2] || '-'];
});

var optionTime = {
    tooltip: {
        position: 'top'
    },
    animation: true,

    grid: {
        height: '50%',
        y: '20%'
    },
    xAxis: {
        type: 'category',
        data: hours,
        splitArea: {
            show: false
        }
    },
    yAxis: {
        type: 'category',
        data: days,
        splitArea: {
            show: false
        }
    },
    visualMap: {
        color:['#ffffff','#eef3fd','#bfd2f6', '#90b3f0','#3775E8'],
        min: 0,
        max: 10,
        calculable: false,
        orient: 'horizontal',
        left: 'center',
        bottom: '15%',
        show:false,
    },
    series: [{
        name: 'Punch Card',
        type: 'heatmap',
        data: data,
        label: {
            normal: {
                show: false
            }
        },
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

myChartime.setOption(optionTime);


//访问时间
var myChartime = echarts.init(document.getElementById('chart-time'));
var hours = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
var days = ['00:00', '02:00', '04:00',
        '06:00', '08:00', '10:00', '12:00','14:00','16:00','18:00','20:00','22:00'];
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];

data = data.map(function (item) {
    return [item[1], item[0], item[2] || '-'];
});

var optionTime = {
    tooltip: {
        position: 'top'
    },
    animation: false,
    grid: {
        height: '50%',
        y: '10%'
    },
    xAxis: {
        type: 'category',
        data: hours,
        splitArea: {
            show: true
        }
    },
    yAxis: {
        type: 'category',
        data: days,
        splitArea: {
            show: true
        }
    },
    visualMap: {
        color:['#eff4fe','#bfd2f6', '#90b3f0', '#6293ea'],
        min: 0,
        max: 10,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: '15%'
    },
    series: [{
        name: 'Punch Card',
        type: 'heatmap',
        data: data,
        label: {
            normal: {
                show: true
            }
        },
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

myChartime.setOption(optionTime);

 //饼图
 var myChar3 = echarts.init(document.getElementById('chart-3'));
 var myChar3option = {
    color: ['#3775E8 ','#50B3ED','#67DED3','#C2F74E','#DBFA14','#F8EC5C'],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        y:'bottom',
        //data:['18岁一下','36~45','18~25','46~55','25~35'],
        data:[{
            name: '18岁以下',
            // 强制设置图形为圆。
            icon: 'circle'
        },{
            name: '18~25',
            // 强制设置图形为圆。
            icon: 'circle'
        },{
            name: '25~35',
            // 强制设置图形为圆。
            icon: 'circle'
        },{
            name: '36~45',
            // 强制设置图形为圆。
            icon: 'circle'
        },{
            name: '46~55',
            // 强制设置图形为圆。
            icon: 'circle'
        },{
            name: '55岁以上',
            // 强制设置图形为圆。
            icon: 'circle'
        }]
    },
    series: [
        {
            name:'年龄分布',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'18岁以下'},
                {value:335, name:'18~25'},
                {value:310, name:'25~35'},
                {value:234, name:'36~45'},
                {value:135, name:'46~55'},
                {value:555, name:'55岁以上'}
            ]
        }
    ]
};

 myChar3.setOption(myChar3option);

 //饼图
  var myChar4 = echarts.init(document.getElementById('chart-4'));
   var myChar4option = {
    color: ['#3775E8','#00E2D3'],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'center',
        y:'bottom',
        //data:['男','女',]
        data:[{
    name: '男',
    // 强制设置图形为圆。
    icon: 'circle'
},{
    name: '女',
    // 强制设置图形为圆。
    icon: 'circle'
}]
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'男'},
                {value:310, name:'女'}
            ]
        }
    ]
};
   myChar4.setOption(myChar4option);

//日历
$('.date-picker').datepicker({
    rtl: App.isRTL(),
    autoclose: true
});
$(function(){
    $('.selecttime').on('click',function(){
        //console.info($(this).next());
        $('.pop').hide();
        $(this).next('.pop').toggle();
    });

    $('.icon-remove').on('click',function(){
        $(this).parents('.pop').hide();
    })




})



     


